<template>

  <div class="photoInfo">
    <!-- <div :animation="animationData" v-show="show" class="scale"> -->
    <!-- <van-transition :show="show" name="fade-down"> -->
      <div class="photocon">
        <div class="fonttitle">扫描行驶证自动填写</div>
        <div class="fonthint">手输太麻烦？试试自动识别填写</div>
        <div class="drivingimg">
          <img src="../assets/driving.png" alt="" srcset="">
        </div>
        <div class="checkhint">
          <img src="../assets/check.png" alt="">
          拍摄信息完整，内容清晰可辩
        </div>
        <div class="errornow">
          <div class="mistakehint">
            <img class="mistakeimg" src="../assets/highlight.png" alt="">
            <div class="mistakehintfont"><img src="../assets/mistake.png" alt="" srcset="">不要高光，过亮</div>
          </div>
          <div class="fullhint">
            <img class="fullimg" src="../assets/full.png" alt="">
            <div class="fullhintfont"><img src="../assets/mistake.png" alt="" srcset="">不要信息不完全</div>
          </div>
        </div>
      </div>
      <div class="photobtnbox">
        <label for="file"><span class="photography"><input id="file" ref="filElem" name="file" type="file" accept="image/*" @change="tophoto()" style="display:none"><img src="../assets/photob.png" alt="">拍摄行驶证(正面)自动识别</span></label>
        
        <button class="backbtn" @click="back()">手动输入车辆识别码</button>
      </div>
    <div class="loading" v-if="!isloaded">
      
    </div>
    
    <!-- <div class="empty-tip" v-if="!isloaded"><van-loading type="spinner" color="#ad2f2f"  size="24px" vertical>识别中...</van-loading></div> -->
     <!-- <van-action-sheet v-model="photoshow">
      <ul>
        <li class="paizhao" @click="captureImage()">拍照</li>
        <li class="paizhao" @click="galleryImg()">从相册选择</li>
        <li class="paizhao" @click="quxiao()">取消</li>
      </ul>
    </van-action-sheet> -->
    <div class="loadingbox" v-show="!isloaded">
        <van-loading size="50px" class="loading" vertical>识别中...</van-loading>
    </div>
  </div>
  
  
</template>

<script>

  export default{
    data(){
      return {
        isloaded:true,
        photoshow:false
      }
    },
  computed:{
   
  },
 
  methods: {
    back(){
      this.$router.go(-1)
    },
    tophoto(){
    //   this.photoshow=true
        this.isloaded=false
        var that = this;
        const inputFile = this.$refs.filElem.files[0];
        let reader = new FileReader();     //html5读文件
        reader.readAsDataURL(inputFile);  //转BASE64 
        console.log(reader)
        reader.onloadend = function() {
            let result = this.result
            let img = new Image()
            img.src = result
            // console.log('********未压缩前的图片大小********')
            // console.log(result.length / 1024)
            img.onload = function() {
                let data = that.compress(img, 0.3)
                 data=data.split(",")
                //  console.log(data[1])
                that.photoupload(data[1])
                
            }
        }
    },
    // 压缩图片
    compress(img, size) {
        let canvas = document.createElement('canvas')
        let ctx = canvas.getContext('2d')
        // let initSize = img.src.length
        let width = img.width
        let height = img.height
        canvas.width = width
        canvas.height = height
        // 铺底色
        ctx.fillStyle = '#fff'
        ctx.fillRect(0, 0, canvas.width, canvas.height)
        ctx.drawImage(img, 0, 0, width, height)
        //进行最小压缩
        let ndata = canvas.toDataURL('image/jpeg', size)
        // console.log(canvas.toDataURL())
        // console.log('*******压缩后的图片大小*******')
        // console.log(ndata)
        // console.log(ndata.length / 1024)
        return ndata
    },
    photoupload(file){
        // var _this = this
        let params = {
            file:file,
            side:'face'
          }
         this.$post('/gzh/object/public/index.php/api/ocr/travel',params).then(res=>{
            // console.log(res)
            this.isloaded = true
            if(res.code == 200){
                let data=res.data.vin
                sessionStorage.setItem('vin',data)
                this.$router.push({path:'/apply',query: {vin:data}})
                // console.log(data)
            }else{
                 this.$toast( {
                    message: res.msg,
                    duration:3000
                })
                
            }
        })
    }
  },
 
  }
</script>

<style lang="scss" scoped>
.loadingbox {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    .loading{
      width: 130px;
      height: 130px;
      background: rgba(0,0,0,.5);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
    }
    .van-loading__text{
      color: #fff;
    }
  }
  .photoInfo{
    // width:100vw;
    // height:100vh;
    overflow: hidden;
    background-color:#fff;
    color: #333333;
    text-align: center;
    // .scale
    //   transform:scale(0.1)
    
    .photocon{
      overflow: hidden;
      padding: 50px 15px;
      .errornow{
          padding: 20px;
      }
      .fonttitle{
        font-size: 20px;
        line-height: 40px;
      }
      .fonthint{
        font-size: 14px;
        line-height: 20px;
        color: #999999;
      }
      .drivingimg{
        width: 100%;
        img{
          width: 255px;
          height: 170px;
        }
      }
      .checkhint{
        font-size: 14px;
        line-height: 20px;
        color: #999999;
        img{
          width: 18px;
          height: 12px;
        }
      }
      .mistakehint{
        width: 150px;
        float: left;
        .mistakeimg{
          width: 108px;
          height: 75px;
        }
        .mistakehintfont{
          width: 100%;
          font-size: 14px;
          line-height: 20px;
          color: #999999;
          img{
            width: 12px;
            height: 12px;
          }
        }
      }
      .fullhint{
        width: 150px;
        float: right;
        .fullimg{
          width: 108px;
          height: 75px;
        }
        .fullhintfont{
          width: 100%;
          font-size: 14px;
          line-height: 20px;
          color: #999999;
          img{
            width: 12px;
            height: 12px;
          }
        }
      }
    }
    .photobtnbox{
      width: 90%;
      margin: 0 auto 0 auto;
      button{
        display: block;
        width: 100%;
        background: #AD2F2F;
        color: #fff;
        border-radius: 10px;
        border: 0;
        margin: 30px auto;
        font-size: 15px;
        padding: 15px;
        img{
          width: 18px;
          height: 15px;
          margin-right: 15px;
        }
      }
      .photography{
        display: block;
        width: 100%;
        background: #AD2F2F;
        color: #fff;
        border-radius: 10px;
        border: 0;
        margin: 30px auto;
        font-size: 15px;
        padding: 15px;
        box-sizing: border-box;
        img{
          width: 18px;
          height: 15px;
          margin-right: 15px;
        }
      }
      .backbtn{
        background: #E5AEAE;
      }
    }
    // .loading{
    //   width:100vw;
    //   height:100vh;
    //   position: absolute;
    //   top: 0;
    //   left: 0;
    //   background: #fff;
    //   opacity: 0.5;
      
    // }
    .empty-tip{
      width: 150px;
      height: 100px;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
    }
    
  }
</style>
